<template>
  <div class="wid">
      <div class="tables">
          <div class="categoryWrap">
            <div class="serchLeft">
                <span>工作类别 : </span>
                <el-input
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model.trim="name" @input="serchList"> 
                </el-input>
            </div>
            <div class="operatingBtn">
                <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
                <el-button type="danger" @click="deleteRow(1)">删除</el-button>
            </div>
          </div>
          <el-table :header-cell-style="{background:'#f5f6f8'}"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
             width="80px"
            type="selection"
           >
            </el-table-column>
            <el-table-column
            label="序号"
            width="110px"
            >
            <template slot-scope="scope">{{ scope.row.index }}</template>
            </el-table-column>
            <el-table-column
            label="工作类别"
            >
            <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column
            prop="number"
            label="工作类别编号"
            >
            </el-table-column>
            <el-table-column
            prop="creater.username"
            label="创建人"
            >
            </el-table-column>
             <el-table-column
            prop="create_time"
            label="创建时间"
            >
            </el-table-column>
            <el-table-column
            prop="operation"
            label="操作"
            >
            <template slot-scope="scope">
                <el-button
                    @click.native.prevent="editRow(scope.$index, tableData)"
                    type="primary"
                    size="mini ">
                    编辑
                </el-button>
                <el-button
                    @click.native.prevent="deleteRow(2,scope.$index, tableData)"
                    type="danger"
                    size="mini ">
                    删除
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="sizes, prev, pager, next"
            :total="pageList.total">
            </el-pagination>
        </div>
      </div>
      <!-- 新增 -->
     <el-dialog :visible.sync="dialogFormVisible">
        <el-form :model="form"  label-position="left"
        :inline="true" :rules="rules" ref="form"
        > 
            <el-form-item label="工作类别：" prop="name">
              <el-input v-model.trim="form.name"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="编号：" prop="number">
              <el-input v-model.trim="form.number" autocomplete="off" type="number"></el-input>
            </el-form-item>
            <el-form-item label="创建人" v-if="form.id">
              <el-input disabled v-model="form.creator" autocomplete="off" ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
     </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
          dialogFormVisible:false,
          serchTxt:'',
          multipleSelection:[],
          form:{
              id:'',
              name:'',
              number:'',
          },
          tableData: [],
          pageList:{},
          page:1,
          name:"",
          rules: {
            name: [
                { required: true, message: '请输入工作类别 ', trigger: 'blur' },
            ],
            number: [
                { required: true, message: '请输入编号', trigger: 'blur' },
            ],
          },
      };
    },

    components: {},

    mounted() {
        this.getJobCategory()
    },

    methods: {
        // 提交
        submit(){
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.utils.isLoadding(true)
                    let { code} = await this.$Http.setJobCategory(this.form);
                    this.utils.isLoadding(false)
                    if (code == 10000) {
                        this.utils.message("提交成功")
                        this.dialogFormVisible = false
                        this.getJobCategory()
                        this.form={
                            creator:'',
                            name:'',
                            number:'',
                            id:'',
                        }
                    }
                }
            })
        },
        //获取列表 
        async getJobCategory(type,limits){
            let params={
                page:this.page,
                limit:limits,
                name:this.name
            }
            let { code, data } = await this.$Http.getJobCategory(params);
            if (code == 10000) {
                data.data.forEach((ele,index) => {
                    ele.index = index + 1
                });
                 this.tableData = data.data
                 this.pageList = data
            }
        },
        // 搜索
        serchList(){
            if(this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.getJobCategory(1)
            }, 1000);
        },
        // 删除单个
        deleteRow(tyep,index){
            let ids = []
            if(tyep == 2){
                ids.push(this.tableData[index].id)
            }else{
                if(!this.multipleSelection.length){
                    this.utils.message("请勾选要删除的工作类别!");
                    return false;
                }
                this.multipleSelection.forEach(ele=>{
                    ids.push(ele.id)
                })
            }
            this.$confirm('此操作将永久删除，是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(async () => {
                    let { code, data } = await this.$Http.delJobCategory({id:ids.join(',')});
                    if (code == 10000) {
                        this.utils.message("删除成功","suc")
                        this.getJobCategory()
                    }
                }).catch(() => {
                this.xin.message("您已取消","info")         
            });
        },
        // 编辑
        editRow(index){
            this.dialogFormVisible = true
            this.form={
                creator:this.tableData[index].creater.username,
                name:this.tableData[index].name,
                number:this.tableData[index].number,
                id:this.tableData[index].id
            }
        },
        // 关闭弹窗清空input内容
        closeDialog(){
            this.form={
                creator:'',
                name:'',
                number:'',
                id:'',
            }
        },
        // 侧边栏选择
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(val,"valvalval")
        },
        //分页事件   
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.getJobCategory(3,val)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val
            this.getUser()
        }
    },

  }

</script>
<style lang='scss' scoped>
.wid{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #F5F5F5;
    .categoryWrap{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        box-sizing: border-box;
        .serchLeft{
            width: 80%;
            display: flex;
            align-items: center;
            span{
                color: #333;
                font-size: 16px;
                margin-right: 20px;
            }
            .el-input{
                width: 300px;
            }
            .el-input__inner{
                border: none;
                background: #f5f5f5;
            }
        }
        .operatingBtn{
            display: flex;
            margin: 0 5px;
            align-items: center;
        }
    
    }
    .placeholder{
        width: 100%;
        height: 10px;
        background: #fff;
    }
    .crumbs{
        padding: 10px 5px;
        color: #666;
        font-size: 16px;
        background: #fff;
        margin-bottom: 20px;
    }
    .tables{
        background: #fff;
        min-height: calc(100vh - 130px);
        border-radius: 12px;
    }
    .page{
        width: 510px;
        margin: 20px auto 0;
    }
}
    ::v-deep.el-form-item{
        display: flex;
    }

    ::v-deep.el-input{
        width: 300px;
    }
    ::v-deep.el-form-item__content{
        margin-left: 0 !important;
    }
    ::v-deep.el-form-item{
        .el-form-item__label{
            width: 100px ;
        }
    }
</style>